<template>
    <el-card :style="execClass" :body-style="execBodyClass"
             :shadow="propJson.shadowType" @click="cardClick()">
        <div v-if="!propJson.editFlag">
            <div class="itemClass" v-for="itemColInfo in propJson.list" >
                <component :is="itemColInfo.component" :propJson="itemColInfo.propJson" :commonParam="commonParam">
                    <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                        <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                    </template>
                </component>
            </div>
        </div>

        <draggable v-if="propJson.editFlag"
                   :list="propJson.list"
                   animation="300"
                   :force-fallback="true"
                   :group="{name:'lowcode'}"
                   class="draggableClass"
                   item-key="id"
        >
            <template #item="{ element }">
                <div class="itemClass">
                    <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)"/>
                    <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                </div>
            </template>
        </draggable>
    </el-card>
</template>

<script name="CommonCardComponent" setup lang="ts">
import {deepCopy} from "@/utils/ywuCommon";
import {getCommonParamObj} from "@/utils/commonParamUtil";
import {computed, defineProps, ref} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import {doThirdServiceAction} from "@/utils/lowcode/thirdService.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let itemFlag = ref(true);

let execClass = computed(() => {
    let style = "background-color: " + propJson.value.backgroundColor + ";";
    style += "width: 99.9%;"
    if (propJson.value.cardHeightType === "CUSTOM") {
        style += "height: " + propJson.value.cardHeight + ";overflow-y: auto;";
    }
    return style;
})

let execBodyClass = computed(() => {
    let style = "";
    style += "padding: 0;";
    if (propJson.value.cardPaddingTop !== '') {
        style += "padding-top: " + propJson.value.cardPaddingTop + ";";
    }
    if (propJson.value.cardPaddingBottom !== '') {
        style += "padding-bottom: " + propJson.value.cardPaddingBottom + ";";
    }
    if (propJson.value.cardPaddingLeft !== '') {
        style += "padding-left: " + propJson.value.cardPaddingLeft + ";";
    }
    if (propJson.value.cardPaddingRight !== '') {
        style += "padding-right: " + propJson.value.cardPaddingRight + ";";
    }
    if (propJson.value.cardBodyWidth !== '') {
        style += "width: " + propJson.value.cardBodyWidth + ";";
    }
    return style
})

let slotList = computed(() => {
    let res = getCommonParamObj(commonParam.value, "templateSlotInfo")
    return res.variableValue;
})

function deleteComponent(element) {
    let colList = propJson.value.list
    // 获取当前列的LIST
    let index = -1;
    // 遍历当前列表，删除元素ID对应的数据
    for (let i = 0; i < colList.length; i++) {
        if (colList[i].id === element.id) {
            index = i;
        }
    }
    if (index >= 0) {
        propJson.value.list.splice(index, 1);
    }
}

function changeComponentInfo(element) {
    let lowCodeStore = useLowCodeStore();
    lowCodeStore.resetCurrentDrawer(element.drawerComponent)
    lowCodeStore.resetCurrentDrawerElementId(element.id);
    lowCodeStore.resetCurrentDrawerTitle(element.title)
    let copyJson = deepCopy(element.propJson)
    lowCodeStore.resetLowCodeDrawerJsonInfo(copyJson);
    lowCodeStore.resetIsShowDrawer(true)
    lowCodeStore.resetLowCodeComponentList(propJson.value.list)
}

async function cardClick() {
    if (!propJson.value.isClickAction) {
        return
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(propJson.value.cardClickAction, awaitObj, commonParam.value, () => {}, () => {}, null);
}
</script>

<style scoped lang="less">
.draggableContainer {
    width: 98%;
    height: 85vh;
    margin-left: 1%;
    padding-top: 0.2%;
    transition: box-shadow 0.3s ease;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    //去除光标
    caret-color: transparent;
    overflow: auto;
    .draggableClass {
        width: 100%;
        height: 100%;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}

.draggableContainer:hover {
    cursor: pointer;
}

.cardClass {
    width: 100%;
    height: 10vh;
}
</style>